!function($){
    const wrap = $('#wrap')
    const spic = $('.spic')
    const sf = $('.sf')
    const bf = $('.bf')
    const bpic = $('.bpic')
    const list = $('.list ul li')
    const moveUl = $('.list ul')
    const left = $(".left")
    const right = $(".right")
    sf.width(bf.width()*spic.width()/bpic.width())
    sf.height(bf.height()*spic.height()/bpic.height())
    spic.hover(function(){
        bf.css('visibility','visible')
        sf.css('visibility','visible')
        let bili = bf.width()/sf.width()
        spic.on('mousemove',function(ev){
            let sfleft = ev.pageX - wrap.offset().left - sf.width()/2
            let sftop = ev.pageY - wrap.offset().top - sf.height()/2
            if(sfleft <0){
                sfleft = 0
            }else if(sfleft > spic.width() - sf.width()){
                sfleft =spic.width() - sf.width()
            }
            if(sftop <0){
                sftop = 0
            }else if(sftop > spic.height() - sf.height()){
                sftop =spic.height() - sf.height()
            }
           sf.css('left',sfleft) 
           sf.css('top',sftop) 
           bpic.css('left',-sfleft * bili)
           bpic.css('top',-sftop * bili)
        })
    },function(){
        bf.css('visibility','hidden')
        sf.css('visibility','hidden')
    })
    list.on('click',function(){
        let url = $(this).find('img').attr('src')
        spic.find('img').attr('src',url)
        bpic.attr('src', url)
    })
    let num = 6
    let liwidth = list.eq(0).outerWidth(true)
    let listlen = list.length
    right.on('click',function(){
        num++
        if(num > listlen){
            num = listlen
        }
        moveUl.stop(true).animate({
            left:-liwidth * (num -6)
        })
    })
    left.on('click',function(){
        
        num--
        if(num < 6){
            num = 6
        }
        moveUl.stop(true).animate({
            left: -liwidth * (num -6)
        })
    })
    // left.on('click',function(){
        
    //     num--
    //     if(num < 6){
    //         num = 6
    //     }
    //     moveUl.stop(true).animate({
    //         left: -liwidth * (num -6)
    //     })
    // })


}(jQuery)